<template>
  <div class="l-echart-bar" :style="styleSizeName" @click="handleClick">
    <div :ref="id" :style="styleChartName"></div>
  </div>
</template>
<script>
import init from "../mixins/common";
export default {
  mixins: [init],
  computed: {
    x2() {
      return this.option.gridX2 || 20;
    },
    legendSet() {
      let legend = this.getLegendPosition(
        this.option.legendPostion,
        this.option.legendPadding
      );
      return legend;
    },
  },
  data() {
    return {
      dataHandle: {},
    };
  },
  methods: {
    updateChart() {
      const optionData = this.$deepClone(this.dataChart);
      this.dataHandle = optionData || {};
      if (this.dataType === 2) {
        this.dataHandle.categories = optionData.map((t) => {
          return t[this.labelKey];
        });
        const series = [];
        this.valueKeys.map((v) => {
          const data = optionData.map((t) => {
            return t[v.k];
          });
          series.push({ name: v.n, data: [...data] });
        });
        this.dataHandle.series = series;
      }
      const option = {
        title: this.ishasprop(
          this.option.titleShow,
          {
            text: this.option.title,
            subtext: this.option.subtext || "",
            textStyle: {
              color: this.option.titleColor || "#333",
              fontSize: this.option.titleFontSize || 16,
            },
            left: this.option.titlePostion || "auto",
            subtextStyle: {
              color: this.option.subTitleColor || "#aaa",
              fontSize: this.option.subTitleFontSize || 14,
            },
          },
          {}
        ),
        tooltip: this.ishasprop(
          this.formatter,
          {
            formatter: (name) => {
              return this.formatter(name, this.dataChart);
            },
          },
          {
            backgroundColor:
              this.option.tipBackgroundColor || "rgba(50,50,50,0.7)",
            borderWidth: "0",
            textStyle: {
              fontSize: this.option.tipFontSize,
              color: this.option.tipColor || "#fff",
            },
          }
        ),
        grid: {
          show: this.option.gridShow,
          left: this.option.gridX || 20,
          top: this.option.gridY || 60,
          right: this.x2,
          bottom: this.option.gridY2 || 60,
        },
        legend: {
          show: this.$vaildData(this.option.legend, false),
          orient: this.option.legendOrient || "horizontal",
          left: this.legendSet.left,
          top: this.legendSet.top,
          padding: this.legendSet.padding || 5,
          textStyle: {
            color: this.option.legendColor || "#999",
            fontSize: this.option.legendFontSize || 12,
          },
          width: this.option.legendWidthAuto
            ? "auto"
            : this.option.legendWidth || "auto",
          itemWidth: this.option.legendItemWidth,
          itemheight: this.option.legendItemHeight,
          icon: this.option.legendItemIcon,
          data: (() => {
            if (this.dataType === 2) {
              return [1, 2, 3];
            }
            return (this.dataHandle.series || []).map((ele) => {
              return {
                name: ele.name,
                textStyle: this.ishasprop(
                  !this.switchTheme,
                  {
                    // color: this.getColor(index, true)
                  },
                  {}
                ),
              };
            });
          })(),
        },
        xAxis: {
          type: this.option.xAxisType || "category",
          name: this.option.xAxisName,
          nameLocation: this.option.xNameNameLocation || "end",
          nameTextStyle: {
            color: this.option.xNameColor,
            fontSize: this.option.xNameFontSize || 12,
            fontWeight: this.option.xNameFontWeight,
          },
          axisLine: {
            show: this.$vaildData(this.option.xAxisLineShow, true),
            lineStyle: {
              color: this.option.xNameLineColor || "#333",
            },
          },
          data: (() => {
            if (this.dataType === 2) {
              if (this.labelKey && this.valueKey) {
                const serieData = [];
                this.dataHandle.forEach((t) => {
                  serieData.push(t[this.labelKey]);
                });
                return serieData || [];
              }
            }
            return this.dataHandle.categories || [];
          })(),
          inverse: this.$vaildData(this.option.xAxisInverse, false),
          show: this.$vaildData(this.option.xAxisShow, true),
          splitLine: {
            show: this.$vaildData(this.option.xAxisSplitLineShow, false),
          },
          axisLabel: {
            interval: this.option.xAxisinterval || "auto",
            rotate: this.option.xAxisRotate || 0,
            textStyle: {
              color: this.option.xNameLabelColor || "#333",
              fontSize: this.option.xNameLabelFontSize || 14,
            },
            formatter: this.option.xAxisFormatter,
          },
        },
        yAxis: {
          type: this.option.yAxisType || "value",
          name: this.option.yAxisName,
          nameLocation: this.option.yNameNameLocation || "end",
          nameTextStyle: {
            color: this.option.yNameColor,
            fontSize: this.option.yNameFontSize || 12,
            fontWeight: this.option.yNameFontWeight,
          },
          max: this.option.yAxisMax,
          min: this.option.yAxisMin,
          data: (() => {
            if (this.dataType === 2) {
              if (this.labelKey && this.valueKey) {
                const serieData = [];
                this.dataHandle.forEach((t) => {
                  serieData.push(t[this.labelKey]);
                });
                return serieData || [];
              }
            }
            return this.dataHandle.categories || [];
          })(),
          axisLabel: {
            interval: this.option.yAxisinterval || "auto",
            textStyle: {
              color: this.option.yNameLabelColor || "#333",
              fontSize: this.option.yNameLabelFontSize || 14, // this.option.yNameFontSize
            },
            formatter: this.option.yAxisFormatter,
          },
          axisLine: {
            show: this.$vaildData(this.option.yAxisLineShow, true),
            lineStyle: {
              color: this.option.yNameLineColor || "#333",
            },
          },
          inverse: this.$vaildData(this.option.yAxisInverse, false),
          show: this.$vaildData(this.option.yAxisShow, true),
          splitLine: {
            show: this.$vaildData(this.option.yAxisSplitLineShow, true),
          },
        },
        series: (() => {
          // const barColor = this.option.barColor || [];
          const list = (this.dataHandle.series || []).map((ele, index) => {
            return Object.assign(ele, {
              type: "bar",
              stack: this.option.isStack ? "all" : ele.stack,
              barWidth: this.option.barWidth || 16,
              barMinHeight: this.option.barMinHeight || 0,
              showBackground: this.option.showBackground,
              backgroundStyle: {
                color: this.option.backgroundColor,
              },
              itemStyle: this.ishasprop(
                !this.switchTheme,
                {
                  color: this.getColor(index, false, this.option.xAxisType=='value'&&this.option.yAxisType=='category'),
                },
                {
                  barBorderRadius: [
                    this.option.radiusTop || 0,
                    this.option.radiusBottom || 0,
                    this.option.radiusLeft || 0,
                    this.option.radiusRight || 0,
                  ],
                  borderWidth: this.option.showBorder ? this.option.barBorderPx || 0 :0,
                  borderColor: this.option.showBorder ? this.option.barBorderColor :'transparent',
                }
              ),
              label: {
                show: this.$vaildData(this.option.labelShow, false), //开启显示
                position: this.option.labelPosition || "top", //在上方/右方显示,
                formatter: this.labelFormatter2(
                  this.option.labelFormatterType,
                  this.option.labelFormatter
                ), // name => this.getLabelFormatter(name)
                textStyle: {
                  //数值样式
                  fontSize: this.option.labelShowFontSize || 14,
                  color: this.option.labelShowColor || "#333",
                  fontWeight: this.option.labelShowFontWeight || "normal",
                },
              },
            });
          });
          return list;
        })(),
      };
      // console.log(JSON.stringify(option));
      this.myChart.resize();
      this.myChart.setOption(option, true);

      /*this.$nextTick(()=>{
                console.log(this.myChart,'test updateChart')

                this.myChart.on('click',()=>{
                    console.log('test click')
                })
            })*/
    },
    handleClick() {
      this.clickFormatter &&
        this.clickFormatter(
          {
            data: this.dataHandle,
          },
          this.getItemRefs()
        );
    },
  },
};
</script>
